const path = require( 'path' );
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于在生产环境下，生成 dist 中的文件之前清除 dist 文件内容
const CleanWebpackPlugin = require('clean-webpack-plugin');

// 这一份文件包含了生产环境以及开发环境的配置


module.exports = env => {

  // 从 mode 里面解析出术语生产环境还是开发环境
  let { mode, page } = env;



  let config = {
    entry: {
      pay: [ 'whatwg-fetch', './src/entries/pay.js' ],
      show: [ 'whatwg-fetch', './src/entries/show.js' ]
    },
    output: {
      filename: '[name].[hash].js'
    },

    context: path.resolve(__dirname),
    devServer: {
      contentBase: path.join( __dirname, 'dist' )
    },

    module: {
      rules: [
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
        {
          test: /\.css$/,
          use: [
            { loader: "style-loader" },
            {
              loader: "css-loader",  // translates CSS into CommonJS
            },
          ]
        }, {
          test: /\.less$/,
          use: [ {
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader",  // translates CSS into CommonJS
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[path]_[local]_[hash:base64:2]'
            }
          }, {
            loader: "less-loader" // compiles Less to CSS
          }
          ]
        }, {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 100000,
                mimetype: 'image/png'
              }
            }
          ]
        },{
          test: /\.svg$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                outputPath: 'images/',
                publicPath: '/'
              }
            }
          ]
        }

      ]

    },
    plugins: [ ]
  };


  if ( mode === 'dev') {
    config.output.path = path.resolve( __dirname, 'dist' );

    config.plugins.push( new HtmlWebpackPlugin(
      {
        template: 'src/templateForWebpackHtmlPlugins/dev/'+ page +'.html' ,
        // 只对特定的页面生成模板
        chunks: [page],
      }) );


  }

  if ( mode === 'pro' ){
    // 生产环境下直接覆盖后端代码
    config.output.path = path.resolve(__dirname, '../back_end/static');


    config.plugins.push(
      new CleanWebpackPlugin( path.resolve(__dirname, '../back_end/static') )
    );

    // 为pay 页面生成的html
    config.plugins.push( new HtmlWebpackPlugin(
      {
        filename: 'template.html',
        template: 'src/templateForWebpackHtmlPlugins/pro/pay.html' ,
        // 只对特定的页面生成模板
        chunks: ['pay'] }) );

    // 为show 页面生成的html
    config.plugins.push( new HtmlWebpackPlugin(
      {
        filename: 'index.html',
        template: 'src/templateForWebpackHtmlPlugins/pro/show.html' ,
        // 只对特定的页面生成模板
        chunks: ['show'] }) );


    // 将用于部署的文件因为代理的存在, 需要添加公共的引用路径
    config.output.publicPath = '/';
  }


  return config;

};